布局控制 (Controlling Layout)

默认情况下，Blocks 中的组件是垂直排列的。本节将介绍如何使用 Gradio 提供的布局元素来更精细地控制组件的排列方式。在底层，这种布局结构使用了 Web 开发中的 flexbox 模型。

行布局 (Rows)

在 with gr.Row() 语句块中的元素将会水平排列。例如，要将两个按钮并排显示：

with gr.Blocks() as demo:
    with gr.Row():
        btn1 = gr.Button("按钮 1")
        btn2 = gr.Button("按钮 2")

您可以设置行中的所有元素具有相同的高度。通过 equal_height 参数进行配置：

with gr.Blocks() as demo:
    with gr.Row(equal_height=True):
        textbox = gr.Textbox()
        btn2 = gr.Button("按钮 2")

行中元素的宽度可以通过每个组件的 scale 和 min_width 参数组合来控制：

• scale 是一个整数，定义元素如何在行中占据空间。如果 scale 设置为 0，元素不会扩展以占据空间。如果 scale 设置为 1 或更大，元素将会扩展。行中的多个元素将按照它们的 scale 比例扩展。下面的例子中，btn2 的扩展是 btn1 的两倍，而 btn0 不会扩展：

with gr.Blocks() as demo:
    with gr.Row():
        btn0 = gr.Button("按钮 0", scale=0)
        btn1 = gr.Button("按钮 1", scale=1)
        btn2 = gr.Button("按钮 2", scale=2)

• min_width 将设置元素的最小宽度。如果没有足够的空间满足所有 min_width 值，行将会换行。

列布局与嵌套 (Columns and Nesting)

列中的组件将垂直排列在彼此之上。由于垂直布局本来就是 Blocks 应用的默认布局，所以列通常嵌套在行内使用，以创建更复杂的布局。例如：

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        text1 = gr.Textbox(label="文本框1")
        slider2 = gr.Textbox(label="文本框2")
        drop3 = gr.Dropdown(["a", "b", "c"], label="下拉列表")
    with gr.Row():
        with gr.Column(scale=1, min_width=300):
            text1 = gr.Textbox(label="提示 1")
            text2 = gr.Textbox(label="提示 2")
            inbtw = gr.Button("中间按钮")
            text4 = gr.Textbox(label="提示 3")
            text5 = gr.Textbox(label="提示 4")
        with gr.Column(scale=2, min_width=300):
            img1 = gr.Image("images/cheetah.jpg")
            btn = gr.Button("GO")

demo.launch()

注意第一个列中有两个文本框垂直排列，第二个列有一个图像和一个按钮垂直排列。注意通过 scale 参数设置的两列的相对宽度，scale 值为 2 的列的宽度是另一列的两倍。

充满浏览器高度/宽度 (Fill Browser Height/Width)

要通过移除侧边填充使应用占据浏览器的整个宽度，使用 gr.Blocks(fill_width=True)。

要使顶层组件扩展以占据浏览器的整个高度，使用 fill_height 并为要扩展的组件应用 scale 值：

import gradio as gr

with gr.Blocks(fill_height=True) as demo:
    gr.Chatbot(scale=1)  # 将扩展以填充高度
    gr.Textbox(scale=0)  # 不会扩展

尺寸 (Dimensions)

一些组件支持设置高度和宽度。这些参数接受数字（解释为像素）或字符串。使用字符串允许直接应用任何 CSS 单位到封装的 Block 元素上。

下面是使用视口宽度 (vw) 的例子：

import gradio as gr

with gr.Blocks() as demo:
    im = gr.ImageEditor(width="50vw")  # 宽度为视口宽度的50%

demo.launch()

选项卡与折叠面板 (Tabs and Accordions)

您可以使用 with gr.Tab('tab_name'): 语句来创建选项卡。在 with gr.Tab('tab_name'): 上下文中创建的任何组件都会出现在该选项卡中。连续的 Tab 语句会被分组，使得一次只能选择一个选项卡，并且只显示该选项卡上下文中的组件。

例如：

import numpy as np
import gradio as gr

def flip_text(x):
    return x[::-1]

def flip_image(x):
    return np.fliplr(x)

with gr.Blocks() as demo:
    gr.Markdown("使用此演示翻转文本或图像文件。")
    with gr.Tab("翻转文本"):
        text_input = gr.Textbox()
        text_output = gr.Textbox()
        text_button = gr.Button("翻转")
    with gr.Tab("翻转图像"):
        with gr.Row():
            image_input = gr.Image()
            image_output = gr.Image()
        image_button = gr.Button("翻转")

    with gr.Accordion("点击查看更多！", open=False):
        gr.Markdown("看看我...")
        temp_slider = gr.Slider(
            0, 1,
            value=0.1,
            step=0.1,
            interactive=True,
            label="滑动我",
        )

    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)

demo.launch()

注意示例中的 gr.Accordion('label')。Accordion 是一个可以切换打开或关闭的布局元素。与 Tabs 类似，它是一个可以选择性地隐藏或显示内容的布局元素。在 with gr.Accordion('label'): 中定义的任何组件都将在点击折叠面板的切换图标时被隐藏或显示。

侧边栏 (Sidebar)

侧边栏是一个可折叠的面板，它在屏幕左侧渲染子组件，可以展开或折叠。

例如：

import gradio as gr
import random

def generate_pet_name(animal_type, personality):
    cute_prefixes = ["毛绒", "小小", "泡泡", "酸黄瓜", "华夫饼", "麻糬", "曲奇", "胡椒"]
    animal_suffixes = {
        "猫": ["胡须", "爪子", "手套", "喵喵"],
        "狗": ["汪汪", "小乖", "尾巴", "汪酱"],
        "鸟": ["羽毛", "翅膀", "啾啾", "推特"],
        "兔子": ["跳跳", "棉尾", "活泼", "毛毛"]
    }

    prefix = random.choice(cute_prefixes)
    suffix = random.choice(animal_suffixes[animal_type])

    if personality == "搞笑":
        prefix = random.choice(["先生", "女士", "队长", "教授"]) + " " + prefix
    elif personality == "皇家":
        suffix += " " + random.choice(["大帝", "华丽", "智者", "勇敢"])

    return f"{prefix} {suffix}"

with gr.Blocks(theme=gr.themes.Soft()) as demo:
    with gr.Sidebar(position="left"):
        gr.Markdown("# 🐾 宠物名称生成器")
        gr.Markdown("使用下面的选项生成一个独特的宠物名字！")

        animal_type = gr.Dropdown(
            choices=["猫", "狗", "鸟", "兔子"],
            label="选择你的宠物类型",
            value="猫"
        )
        personality = gr.Radio(
            choices=["普通", "搞笑", "皇家"],
            label="性格类型",
            value="普通"
        )

    name_output = gr.Textbox(label="你宠物的华丽名字:", lines=2)
    generate_btn = gr.Button("生成名字! 🎲", variant="primary")
    generate_btn.click(
        fn=generate_pet_name,
        inputs=[animal_type, personality],
        outputs=name_output
    )

demo.launch()

可见性 (Visibility)

组件和布局元素都有一个 visible 参数，可以初始设置和动态更新。在列上设置 gr.Column(visible=...) 可以用来显示或隐藏一组组件。

import gradio as gr

with gr.Blocks() as demo:
    name_box = gr.Textbox(label="姓名")
    age_box = gr.Number(label="年龄", minimum=0, maximum=100)
    symptoms_box = gr.CheckboxGroup(["咳嗽", "发烧", "流鼻涕"])
    submit_btn = gr.Button("提交")

    with gr.Column(visible=False) as output_col:
        diagnosis_box = gr.Textbox(label="诊断")
        patient_summary_box = gr.Textbox(label="患者摘要")

    def submit(name, age, symptoms):
        return {
            submit_btn: gr.Button(visible=False),
            output_col: gr.Column(visible=True),
            diagnosis_box: "新冠" if "咳嗽" in symptoms else "流感",
            patient_summary_box: f"{name}, {age} 岁",
        }

    submit_btn.click(
        submit,
        [name_box, age_box, symptoms_box],
        [submit_btn, diagnosis_box, patient_summary_box, output_col],
    )

demo.launch()

分开定义和渲染组件 (Defining and Rendering Components Separately)

在某些情况下，您可能想要在实际渲染前定义组件。例如，您可能希望在相应的 gr.Textbox 输入上方显示一个使用 gr.Examples 的示例部分。由于 gr.Examples 需要输入组件对象作为参数，您需要先定义输入组件，然后再渲染它。

解决方案是在 gr.Blocks() 作用域之外定义 gr.Textbox，然后在想要放置它的 UI 位置使用组件的 .render() 方法。

以下是完整的代码示例：

# 在 Blocks 作用域之外定义组件
input_textbox = gr.Textbox()

with gr.Blocks() as demo:
    # 先添加示例
    gr.Examples(["你好", "早安", "晚安"], input_textbox)
    # 然后渲染文本框
    input_textbox.render()

这种方法允许您更灵活地控制组件的定位，特别是当您需要组件对象的引用来创建其他 UI 元素时。